<template>
    <div class="login-wrapper" v-show="!wx">
        <div class="login-form-card">
            <div class="text text-right">
                <span>没有账号</span>
                <router-link to="/register">立即注册</router-link>
            </div>
            <div class="inp-item">
                <div class="icon">
                    <i class="iconfont icon-user"></i>
                </div>
                <input type="text" v-model="form.username" placeholder="国内手机号/用户名/邮箱/卡号">
            </div>
            <div class="inp-item" v-if="!accountLoginTypeCode">
                <div class="icon">
                    <i class="iconfont icon-password"></i>
                </div>
                <input type="password" v-model="form.password" placeholder="请输入您的密码">
                <div class="append-right">
                    <router-link to="/password">忘记密码</router-link>
                </div>
            </div>
            <div class="inp-item" v-else>
                <div class="icon">
                    <i class="iconfont icon-password"></i>
                </div>
                <input type="password" v-model="form.verificationCode" placeholder="请输入验证码">
                <div class="append-right " :class="yzmBtn.text.length > 5 ? 'yzm' : ''">
                    <a href="javascript:;"
                       class="cur"
                       :class="{disabled:yzmBtn.disabled}"
                       @click="sendYzm">{{yzmBtn.text}}</a>
                </div>
            </div>
            <l-button block :loading="loading" @click="handlerLogin">登&emsp;&emsp;录</l-button>
            <div class="text" @click="accountLoginTypeCode = !accountLoginTypeCode">
                <span v-if="!accountLoginTypeCode">手机动态密码登录</span>
                <span v-else>账号密码登录</span>
            </div>
        </div>
        <div class="other-login-type flex al-c jc-c">
            <div class="item" @click="handlerWxLogin">
                <img src="../../assets/img/icon/icon-weixin.png" alt="">
                微信登录
            </div>
            <!--<div class="item">
                <img src="../../assets/img/icon/icon-qq.png" alt="">
            </div>
            <div class="item">
                <img src="../../assets/img/icon/icon-zfb.png" alt="">
            </div>-->
        </div>
    </div>
</template>

<script>
    import yzm from '@/mixins/yzm'

    export default {
        name: 'Login',
        mixins: [yzm],
        data() {
            return {
                accountLoginTypeCode: false,
                loading: false,
                form: {
                    username: '',
                    password: '',
                    // username: '15733125234',
                    // password: '111111',
                    verificationCode: '',
                }
            }
        },
        computed: {
            wx() {
                return this.$utils.browser.isWx
            }
        },
        async created() {
        },
        async mounted() {
            if (window.__wxjs_environment === 'miniprogram') {
                window.$wxMini.switchTab({
                    url: `/pages/admin/index`
                })
            } else if (this.$utils.browser.isWx) {
                this.handlerWxLogin()
            }
        },
        components: {},
        methods: {
            async handlerLogin() {
                this.$toast.loading({
                    message: '登录中',
                    duration: 0
                })
                try {
                    let token = ''
                    if (this.accountLoginTypeCode) {
                        const {data} = await this.$api.user.loginByCode(this.form.username, this.form.verificationCode)
                        token = data
                    } else {
                        const {data} = await this.$api.user.login(this.form.username, this.form.password)
                        token = data
                    }
                    this.$utils.store.set('token', token)
                    this.loginSuccess()
                } catch (e) {
                    console.error(e)
                }
                this.$toast.clear()
            },
            async sendYzm() {
                if (this.yzmBtn.disabled) {
                    return
                }
                const phone = this.form.username
                if (phone.trim().length !== 11) {
                    this.$notify({
                        type: 'warning',
                        message: '请输入手机号'
                    })
                    return
                }
                try {
                    await this.$api.user.sendMessage(phone)
                    this.getYzmFn()
                } catch (e) {
                    console.error(e)
                }
            },
            async loginSuccess() {
                await this.$root.getUserInfo()
                if (window.history.length > 1) {
                    this.$router.go(-1)
                } else {
                    this.$router.replace('/')
                }
                this.$notify({
                    type: 'success',
                    message: '登陆成功'
                })
            },
            loginFail() {
                this.$notify({
                    type: 'error',
                    message: '登陆失败'
                })
            },
            async handlerWxLogin() {
                this.$toast.loading({
                    message: '登录中',
                    duration: 0
                })
                let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=URL&response_type=code&scope= =${encodeURIComponent('URL/mobile.html#/login/other')}&connect_redirect=1#wechat_redirect`
                // url = `${this.$utils.origin}/mobile.html#/login/other`
                this.$toast.clear()
                window.location.replace(url)
                setTimeout(() => {
                    this.$toast.clear()
                    this.loginFail()
                }, 60 * 1000)
            }
        }
    }
</script>

<style lang="scss">
    @import "./style";
</style>
